<template>
  <a-spin :spinning="spinning">
    <PageHeader v-if="isContainByString('file')" @back="$router.go(-1)" subTitle="返回">
      招工劳务费规则
    </PageHeader>
    <div class="body page-miH page-bgBack">
      <div class="body">
        <!-- 左边内容 -->
        <div class="left">
          <a-input-search placeholder="搜索规则名称" allowClear style="width:343px;height:32px;margin-top:24px" @search="onSearch" />
          <div class="left-top">
            <div>
              <a-checkbox style="margin-left:5px" v-if="deleteState" v-model="allState" :disabled="!list.length" @change="onCheckChange">
              </a-checkbox>
              <span class="title">招工劳务费规则</span>
            </div>

            <div style="display:flex;align-items:center;">
              <div class="primary" style="font-size:14px;font-weight:500;margin-right:16px" type="link" @click="onCreate">
                新增规则
              </div>
              <!-- <div
              class="primary"
              size="small"
              style="font-size:14px;font-weight:500;margin-right:16px"
              type="link"
              v-if="!isContainByString('file')"
              @click="showModal"
            >
              下发
            </div> -->
              <a-dropdown>
                <a-menu slot="overlay" @click="handleMenuClick">
                  <a-menu-item key="1" v-if="!isContainByString('file')">下发规则</a-menu-item>
                  <a-menu-item key="2">批量删除</a-menu-item>
                </a-menu>
                <a-button type="link"><a-icon style="font-size:22px;font-weight:500" type="ellipsis"/></a-button>
              </a-dropdown>
            </div>
          </div>
          <div class="xian"></div>
          <div
            class="left-center"
            v-for="(item, index) in list"
            :key="index + 1"
            :class="listIndex == index ? 'active' : ''"
            @click="onClickRule(item, index)"
          >
            <div style="display:flex">
              <a-checkbox v-if="deleteState" style="margin-left:4px" v-model="item.isChecked" @change="itemCheckChange"> </a-checkbox>
              <div
                style=" width:240px;overflow: hidden;white-space: nowrap;text-overflow:ellipsis;"
                :class="listIndex === index ? 'listTitle' : 'left-center-title'"
              >
                {{ item.name }}
              </div>
            </div>
            <span class="left-center-title1">{{ item.usePeopleNumber }} 人</span>
          </div>
          <a-pagination
            style="margin-top:12px;float: right;"
            v-model="current"
            :page-size-options="pageSizeOptions"
            :total="total"
            show-size-changer
            :page-size="pageSize"
            @showSizeChange="onShowSizeChange"
            @change="currentChange"
            size="small"
          ></a-pagination>
          <div v-if="lastCheckState" class="functionBox">
            <a-button @click="checkCancel">
              取消
            </a-button>
            <a-button type="primary" style="margin-left:16px" @click="deleteItems">
              确定
            </a-button>
          </div>
        </div>
        <!-- 右边内容 -->
        <div class="right">
          <!-- 编辑删除 -->
          <div class="right-top">
            <div v-if="!ruleNameInput" class="topTile" style="color: #3c3d43; font-size: 18px; font-weight: bold">
              {{ detaile ? detaile.name : "---" }}
              <a-button type="link" @click="editRuleName"><xq-icon type="icon-bianji" style="width:18px;height:18px;"/></a-button>
            </div>
            <div style="display:flex" v-else>
              <a-input v-model="detaile.name" placeholder="请输入规则名称" ref="nameInput" />
              <a-button type="link" @click="addRuleOk">
                确认
              </a-button>
              <a-button type="link" @click="cancelRule">
                取消
              </a-button>
            </div>

            <div>
              <a-button
                type="primary"
                style="margin-right:24px"
                :disabled="ruleNameInput || !list.length"
                ghost
                @click="deleteVisible2 = true"
              >
                删除
              </a-button>
            </div>
          </div>
          <!-- 工价计算 -->
          <div v-if="list.length > 0">
            <div>
              <div class="addIngItem">
                <div style="display:flex;margin-top:24px">
                  <div class="shuxian"></div>
                  <div style="color: #000000;font-size:16px;margin-left:10px;font-weight:bold">
                    已添加的规则项
                  </div>
                </div>
                <a-button
                  type="link"
                  :disabled="ruleNameInput"
                  style="display:flex;flex-direction:row;align-items:center;cursor:pointer;margin-top:16px"
                  @click="onCreateItem"
                >
                  <a-icon type="plus-circle" class="icon" style="margin-top:4px" />
                  <span style="font-size: 14px;font-weight: 1000;">添加规则</span>
                </a-button>
              </div>

              <div>
                <a-table style="margin-top: 15px" rowKey="id" :columns="columns2" :data-source="dataList" :pagination="paginationOpt">
                  <div slot="action" slot-scope="text, record">
                    <a-button size="small" type="link" @click="onClickEdit(record)">编辑</a-button>
                    <a-button size="small" type="link" @click="showDelete(record)">删除</a-button>
                  </div>
                </a-table>
              </div>
            </div>

            <!-- 使用者 -->
            <div style="margin-top: 20px">
              <div class="shu">
                <div class="shuxian"></div>
                <div style="color:#000000;font-size:16px;margin-left:10px;font-weight:bold">使用者</div>
              </div>
            </div>
            <!-- 搜索 -->
            <a-input-search
              v-model="nameOrIdCard"
              placeholder="搜索姓名/身份证号"
              style="width: 201px; height: 32px; margin-top: 14px"
              @search="onSearch1"
            />
            <!-- 表格 -->
            <a-table style="margin-top: 15px" rowKey="id" :columns="columns" :data-source="dataList2" :pagination="paginationOpt2">
              <!-- <span slot="channelName" slot-scope="text, record">
              {{ record.channelVO ? record.channelVO.name : "---" }}
            </span> -->
            </a-table>
          </div>
          <div class="zanwushuju" v-else>
            <a-empty />
          </div>
        </div>

        <!-- 添加抽屉 -->
        <a-drawer :title="title" class="drawer" :placement="placement" width="580px" :visible="visible" @close="visible = false">
          <div>
            <span style="color: #55565D;">
              生效时间
            </span>
            <a-select style="width:255px;margin-left:15px" placeholder="请选择" v-model="effectType" @change="effectTypeChange">
              <a-select-option value="3">
                长期
              </a-select-option>
              <a-select-option value="2">
                半长期
              </a-select-option>
              <a-select-option value="1">
                限时
              </a-select-option>
            </a-select>
          </div>
          <div v-if="effectType === '2' || effectType === '1'">
            <a-radio-group style="margin-top:16px" v-model="timeStart.type" @change="typeChange">
              <a-radio-button value="1">
                按时间
              </a-radio-button>
              <a-radio-button value="2">
                按日期
              </a-radio-button>
            </a-radio-group>
          </div>
          <div>
            <a-range-picker
              v-model="rangeDate"
              v-if="timeStart.type === '2' && effectType === '1'"
              style="margin-top:16px"
              @change="bothChange"
            />
            <div style="margin-top:16px" v-if="timeStart.type === '1' && effectType === '1'">
              入职后的第 <a-input-number v-model="timeStart.startNumber" :min="1" style="width:88px;margin:0 5px" />至
              <a-input-number :min="timeStart.startNumber" style="width:88px;margin:0 5px" v-model="timeStart.endNumber" />
              <a-select style="width:108px; margin 0 5px" v-model="timeStart.unit" @change="unitChange">
                <a-select-option v-for="(item, index) in option" :key="index" :value="item.value">
                  {{ item.label }}
                </a-select-option>
              </a-select>
            </div>
            <div style="margin-top:16px" v-if="timeStart.type === '1' && effectType === '2'">
              始于第<a-input-number v-model="timeStart.startNumber" :min="1" style="width:88px;margin:0 5px" />
              <a-select style="width:108px;margin:0 5px" v-model="timeStart.unit" @change="unitChange">
                <a-select-option v-for="(item, index) in option" :key="index" :value="item.value">
                  {{ item.label }}
                </a-select-option>
              </a-select>
            </div>
            <div v-if="timeStart.type === '2' && effectType === '2'" style="margin-top:16px">
              始于<a-date-picker style="margin:0 5px" @change="onlyStartChange" v-model="startDatePick" />
            </div>
          </div>
          <div v-if="effectType">
            <div style="margin-top: 20px">
              <div class="shu">
                <div class="shuxian"></div>
                <div style="color:#000000;font-size:16px;margin-left:10px">基础规则</div>
              </div>
            </div>
            <div><a-checkbox style="margin-top:16px" :defaultChecked="calculation" v-model="calculation"> 渠道分润 </a-checkbox></div>
            <a-radio-group v-if="calculation" v-model="ruleType" style="margin-top: 20px">
              <a-radio-button value="2" style="width: 104px; text-align: center" :disabled="timeStart.unit === 2">
                工时分润
              </a-radio-button>
              <a-radio-button value="1" style="width: 104px; text-align: center" :disabled="timeStart.unit === 3">
                按天分润
              </a-radio-button>
              <a-radio-button value="3" style="width: 104px; text-align: center">
                比例分润
              </a-radio-button>
            </a-radio-group>
            <div style="margin-bottom: 70px">
              <div style="margin-top: 20px" v-if="calculation && (ruleType === '1' || ruleType === '2')">
                工价
                <a-input-number :min="0" style="width: 88px; margin: 0 5px" v-model="wagesdetail" />
                <span v-if="ruleType === '1'">元/天</span>
                <span v-if="ruleType === '2'">元/工时</span>
              </div>
              <div style="margin-top: 20px" v-if="calculation && ruleType === '3'">
                <a-input-number :min="0" style="width: 88px; margin: 0 5px" v-model="wagesdetail" />
                %工人实发工资
              </div>
              <div>
                <div>
                  <a-checkbox style="margin-top: 20px" :defaultChecked="welfareChecked" v-model="welfareChecked">
                    红包
                  </a-checkbox>
                </div>
                <div v-if="welfareChecked" style="margin-top: 15px">
                  每满
                  <a-input-number
                    v-model="RedPacketRule.number"
                    :formatter="limitNumber"
                    :parser="limitNumber"
                    :min="0"
                    style="width:88px;margin:0 5px"
                  />
                  <a-select style="width:108px; margin:0 5px" v-model="RedPacketRule.units">
                    <!-- <a-select-option v-for="(item, index) in option" :key="index" :value="item.value">
                    {{ item.label }}
                  </a-select-option> -->
                    <a-select-option value="1" :disabled="timeStart.unit === 3">
                      月
                    </a-select-option>
                    <a-select-option value="2" :disabled="timeStart.unit === 3">
                      天
                    </a-select-option>
                    <a-select-option value="3" :disabled="timeStart.unit === 2">
                      工时
                    </a-select-option>
                  </a-select>
                  发放
                  <a-input-number v-model="RedPacketRule.redPacketAmount" style="width:88px;margin:0 5px" :min="1" />
                  元红包
                </div>
              </div>
              <!-- 一次性红包新增条件 -->
              <div style="margin-top: 30px">
                <div class="shu">
                  <div class="shuxian"></div>
                  <div style="color: #000000; font-size: 16px; margin-left: 10px">离职规则</div>
                </div>
              </div>
              <!-- 离职倒扣新增条件 -->
              <div>
                <a-checkbox style="margin-top:16px" :defaultChecked="dissatisfyMonth" v-model="dissatisfyMonth"> 不满月限制 </a-checkbox>
                <a-popover placement="top">
                  <template slot="content">
                    <span style="font-size:12px">对离职当月不满月有特殊规则时，需勾选</span>
                  </template>
                  <a-icon style="cursor:pointer;color:#BEBEBE" type="question-circle" theme="filled" />
                </a-popover>
              </div>
              <!-- <div>
              <a-checkbox style="margin-top:16px" v-model="lastLimit"> 最后阶段限制 </a-checkbox>
              <a-popover placement="top">
                <template slot="content">
                  <span style="font-size:12px">对离职的最后某阶段有特殊规则时，需在此配置时间</span>
                </template>
                <a-icon style="cursor:pointer;color:#BEBEBE" type="question-circle" theme="filled" />
              </a-popover>
              <div style="margin-top:16px" v-if="lastLimit">
                最后<a-input-number v-model="EndAstrict.number" :min="1" style="width:88px;margin:0 5px" />
                <a-select style="width:108px;margin:0 5px" v-model="EndAstrict.unit">
                  <a-select-option v-for="(item, index) in option" :key="index" :value="item.value">
                    {{ item.label }}
                  </a-select-option>
                </a-select>
              </div>
            </div> -->
              <div><a-checkbox style="margin-top:16px" :defaultChecked="calculation2" v-model="calculation2"> 渠道分润 </a-checkbox></div>
              <a-radio-group v-if="calculation2" v-model="ruleType2" style="margin-top:20px">
                <a-radio-button value="2" style="width:104px;text-align:center" :disabled="timeStart.unit === 2">
                  工时分润
                </a-radio-button>
                <a-radio-button value="1" style="width:104px;text-align:center" :disabled="timeStart.unit === 3">
                  按天分润
                </a-radio-button>
                <a-radio-button value="3" style="width:104px;text-align:center">
                  比例分润
                </a-radio-button>
              </a-radio-group>
              <div style="margin-top: 20px" v-if="calculation2 && (ruleType2 === '1' || ruleType2 === '2')">
                工价
                <a-input-number :min="0" style="width: 88px; margin: 0 5px" v-model="departureDetail" />
                <span v-if="ruleType2 === '1'">元/天</span>
                <span v-if="ruleType2 === '2'">元/工时</span>
              </div>
              <div style="margin-top: 20px" v-if="calculation2 && ruleType2 === '3'">
                <a-input-number :min="0" style="width: 88px; margin: 0 5px" v-model="departureDetail" />
                %工人实发工资
              </div>
              <!-- <div style="margin-top:20px" v-if="calculation2">
              工价
              <a-input-number :min="0" style="width:88px;margin:0 5px" v-model="departureDetail" />
              元/天
            </div> -->
              <div>
                <div>
                  <a-checkbox style="margin-top:20px" :defaultChecked="welfareChecked2" v-model="welfareChecked2">
                    红包
                  </a-checkbox>
                </div>
                <div v-if="welfareChecked2" style="margin-top:15px">
                  每满
                  <a-input-number
                    v-model="RedPacketRule2.number"
                    :formatter="limitNumber"
                    :parser="limitNumber"
                    :min="0"
                    style="width:88px;margin:0 5px"
                  />
                  <a-select style="width:108px; margin:0 5px" v-model="RedPacketRule2.units">
                    <!-- <a-select-option v-for="(item, index) in option" :key="index" :value="item.value">
                    {{ item.label }}
                  </a-select-option> -->
                    <a-select-option value="1" :disabled="timeStart.unit === 3">
                      月
                    </a-select-option>
                    <a-select-option value="2" :disabled="timeStart.unit === 3">
                      天
                    </a-select-option>
                    <a-select-option value="3" :disabled="timeStart.unit === 2">
                      工时
                    </a-select-option>
                  </a-select>
                  发放
                  <a-input-number v-model="RedPacketRule2.redPacketAmount" style="width:88px;margin:0 5px" :min="1" />
                  元红包
                </div>
              </div>
              <div>
                <a-checkbox v-model="checked1" :defaultChecked="checked1" @change="onChange1" style="margin-top:20px">
                  离职倒扣
                </a-checkbox>
              </div>
              <div style="margin-top:20px" v-if="checked1">
                <span>
                  倒扣
                  <a-input-number v-model="specialCostDouble" style="width:88px;margin:0 5px" :min="1" />
                  元工资
                </span>
              </div>
            </div>
          </div>
          <div
            :style="{
              position: 'absolute',
              bottom: 0,
              width: '100%',
              borderTop: '1px solid #e8e8e8',
              padding: '10px 16px',
              textAlign: 'center',
              left: 0,
              background: '#fff',
              borderRadius: '0 0 4px 4px',
              zIndex: '10'
            }"
          >
            <a-button style="margin-right:20px" @click="visible = false"> 取消 </a-button>
            <a-button type="primary" @click="onClose"> 确定 </a-button>
            <!-- <a-button type="primary" @click="onCloseEdit" v-else> 确定 </a-button> -->
          </div>
        </a-drawer>
        <a-modal title="删除劳务费规则" :visible="deleteVisible2" @ok="deleteOk2" @cancel="deleteVisible2 = false">
          <div style="display:flex;justify-content:center">
            <a-icon type="question-circle" style="font-size:24px;color:#6a66f6" />
            <div style="font-size:16px;font-weight:500;color:#3c3d43;line-height:20px;margin-left:16px">
              您确定要删除该规则？一旦删除不可恢复
            </div>
          </div>
        </a-modal>
        <a-modal title="删除劳务费规则" :visible="deleteVisible" @ok="deleteOk" @cancel="deleteVisible = false">
          <div style="display:flex;justify-content:center">
            <a-icon type="question-circle" style="font-size:24px;color:#6a66f6" />
            <div style="font-size:16px;font-weight:500;color:#3c3d43;line-height:20px;margin-left:16px">
              您确定要删除该规则项吗？一旦删除不可恢复
            </div>
          </div>
        </a-modal>
        <a-modal
          :visible="issueModalVisible"
          title="下发规则"
          width="560px"
          :destroy-on-close="true"
          @ok="confirmIssueModal"
          @cancel="handleCancelIssueModal"
        >
          <a-form-model :label-col="labelCol" :wrapper-col="wrapperCol" class="antClassSelectHei">
            <a-form-model-item label="请选择规则">
              <a-select
                v-model="contractList"
                mode="multiple"
                show-search
                placeholder="请选择规则"
                option-filter-prop="children"
                style="width:300px;"
              >
                <a-select-option v-for="(item, index) in list" :key="index" :value="item.id">
                  {{ item.name }}
                </a-select-option>
              </a-select>
            </a-form-model-item>
            <a-form-model-item label="用工单位">
              <a-tree-select
                placeholder="请选择用工单位"
                v-model="companyList"
                :tree-data="companyDataList"
                :replaceFields="replaceFields"
                labelInValue
                :filterTreeNode="false"
                @search="treeSearch"
                tree-checkable
                getPopupContainer
                style="width:300px;max-height:350px;"
              /> </a-form-model-item
          ></a-form-model>
        </a-modal>
      </div>
    </div>
  </a-spin>
</template>
<script>
import { formatDate } from "@/utils/index";
import {
  salaryCalculateRules,
  salaryCalculateRulesList,
  getSalaryCalculateRuleGroupsPage,
  editSalaryCalculateRuleGroups,
  salaryCalculateRulesEdit,
  salaryCalculateRulesDelete,
  salaryCalculateRulesEdits,
  selectEmpInfoVoBySalaryCalculateRuleId,
  selectEmpInfoVoBySalaryCalculateRuleGroupId,
  selectEmpInfoVoBySalaryCalculateRuleGroupId2,
  addSalaryCalculateRuleGroups,
  salaryRulesListByPage,
  deleteRuleGroupId,
  issueGroup,
  deleteItems
} from "@/api/outsourcing/outrules";
import { findCompanyGroup } from "@/api/company/contract";
const columns = [
  {
    title: "姓名",
    dataIndex: "name",
    key: "name",
    width: 100
  },
  {
    title: "联系电话",
    dataIndex: "phone",
    key: "phone",
    width: 120
  },
  {
    title: "最近入职日期",
    dataIndex: "joinDate",
    key: "joinDate",
    customRender: (text, record, index) => {
      return formatDate(text);
    },
    width: 120,
    scopedSlots: { customRender: "joinDate" }
  },
  {
    title: "当前用工单位",
    dataIndex: "workingUnitName",
    key: "workingUnitName",
    width: 100
  },
  {
    title: "渠道来源",
    dataIndex: "channelName",
    key: "channelName",
    width: 100,
    scopedSlots: { customRender: "channelName" }
  }
];
const columns2 = [
  {
    title: "生效时间",
    dataIndex: "timeShow",
    key: "timeShow",
    width: 100
  },
  {
    title: "基础规则",
    dataIndex: "hourAmountRuleShow",
    key: "hourAmountRuleShow1",
    width: 120
  },
  {
    title: "离职规则",
    dataIndex: "leaveOfficeRuleShow",
    key: "leaveOfficeRuleShow",
    width: 120
  },
  {
    title: "操作",
    dataIndex: "action",
    key: "action",
    width: 100,
    align: "center",
    scopedSlots: { customRender: "action" }
  }
];
import moment from "moment";
import { mapState } from "vuex";
import { isContainByString } from "@/utils/index";
export default {
  data() {
    return {
      value: "",
      columns2,
      labelCol: { span: 6 },
      wrapperCol: { span: 16 },
      pageSizeOptions: ["10", "20", "50", "100"],
      current: 1,
      pageSize: 10,
      total: 0,
      isContainByString,
      contractList: [],
      companyDataList: [],
      flatDataList: [],
      rangeDate: undefined,
      startDatePick: undefined,
      specialCostDouble: undefined,
      EndAstrict: {},
      calculation: false,
      calculation2: false,
      welfareType: null,
      issueModalVisible: false,
      ruleNameInput: false,
      spinning: false,
      nameOrIdCard: "",
      allState: false,
      replaceFields: {
        children: "companyList",
        title: "name",
        key: "uuid",
        value: "uuid"
      },
      columns,
      checked: false, // 一次性红包
      checked1: false, // 离职
      deleteVisible: false,
      deleteVisible2: false,
      dataList: [],
      dataList2: [], // 列表数据
      ruleType: "1",
      ruleType2: "1",
      ruleTypeCopy: "1",
      ruleType2Copy: "1",
      numList: [],
      leaveList: [],
      labourList: [],
      hourAmountDouble: null,
      dissatisfyMonth: false,
      endAstrict: false,
      showName: false,
      companyList: [],
      salaryCalculateRuleId: "",

      option: [
        {
          label: "月",
          value: 1
        },
        {
          label: "天",
          value: 2
        },
        {
          label: "工时",
          value: 3
        }
      ],
      effectType: null,
      type: null,
      lastCheckState: false,
      wagesdetail: null,
      departureDetail: null,
      wagesdetailCopy: null,
      departureDetailCopy: null,
      lastLimit: false,
      detaileCopy: {},
      listIndex: 0,
      functionBox: "",
      title: "",
      isAdd: false,
      visible: false,
      welfareChecked: false,
      welfareChecked2: false,
      RedPacketRule: {},
      RedPacketRule2: {},
      companyId: this.$store.state.hr.companyId,
      deleteItemId: "",
      placement: "right",
      editId: null,
      name: "",
      dataListCopy: "",
      dataListCopy2: "",
      list: [],
      detaile: null,
      timeStart: {},
      deleteState: false,
      paginationOpt2: {
        current: 1,
        defaultCurrent: 1, // 默认当前页数
        // defaultPageSize: 5, // 默认当前页显示数据的大小
        total: 0, // 总数，必须先有
        showSizeChanger: true,
        showQuickJumper: true,
        pageSizeOptions: ["10", "20", "50", "100"],
        showTotal: total => `共 ${total} 条`, // 显示总数
        onShowSizeChange: (current, pageSize) => {
          this.paginationOpt2.current = 1;
          this.paginationOpt2.defaultCurrent = 1;
          this.paginationOpt2.defaultPageSize = pageSize;
          this.redPacketList(); // 显示列表的接口名称
        },
        // 改变每页数量时更新显示
        onChange: (current, size) => {
          this.paginationOpt2.current = current;
          this.paginationOpt2.defaultCurrent = current;
          this.paginationOpt2.defaultPageSize = size;
          this.redPacketList();
        }
      },
      paginationOpt: {
        current: 1,
        defaultCurrent: 1, // 默认当前页数
        // defaultPageSize: 5, // 默认当前页显示数据的大小
        total: 0, // 总数，必须先有
        showSizeChanger: true,
        showQuickJumper: true,
        pageSizeOptions: ["10", "20", "50", "100"],
        showTotal: total => `共 ${total} 条`, // 显示总数
        onShowSizeChange: (current, pageSize) => {
          this.paginationOpt.current = 1;
          this.paginationOpt.defaultCurrent = 1;
          this.paginationOpt.defaultPageSize = pageSize;
          this.salaryRulesListByPage(); // 显示列表的接口名称
        },
        // 改变每页数量时更新显示
        onChange: (current, size) => {
          this.paginationOpt.current = current;
          this.paginationOpt.defaultCurrent = current;
          this.paginationOpt.defaultPageSize = size;
          this.salaryRulesListByPage();
        }
      }
    };
  },
  filters: {
    filterType(val) {
      if (val === 1) {
        return "月";
      } else if (val === 2) {
        return "天";
      } else if (val === 3) {
        return "工时";
      } else {
        return "";
      }
    },
    filterType2(val) {
      if (val === 1) {
        return "月";
      } else if (val === 3) {
        return "天";
      } else {
        return "";
      }
    }
  },
  computed: {
    ...mapState(["app", "hr"]),

    sidebar() {
      return this.$store.state.app.sidebar.opened;
    }
  },
  watch: {
    sidebar(newVal) {
      this.functionBox = newVal ? "functionBox2" : "functionBox3";
    },
    welfareChecked(e) {
      if (e === false) {
        this.RedPacketRule = {};
      }
    },
    welfareChecked2(e) {
      if (e === false) {
        this.RedPacketRule2 = {};
      }
    },
    checked1(e) {
      if (e === false) {
        this.specialCostDouble = null;
      }
    },
    lastLimit(e) {
      if (e === false) {
        this.EndAstrict = {};
      }
    },
    // effectType(e) {
    //   if (e) {
    //     this.timeStart = {};
    //     this.ruleType = "2";
    //     this.clear();
    //     // this.effectType = undefined;
    //     this.timeStart.type = undefined;
    //     this.calculation = false;
    //     this.calculation2 = false;
    //     this.ruleType2 = "2";
    //     this.welfareChecked = false;
    //     this.welfareChecked2 = false;
    //     this.lastLimit = false;
    //     this.checked1 = false;
    //     this.dissatisfyMonth = false;
    //     this.rangeDate = null;
    //     this.startDatePick = null;
    //   }
    // },
    calculation(e) {
      if (e === false) {
        this.ruleType = null;
        this.wagesdetail = null;
      } else {
        this.ruleType = this.ruleTypeCopy;
        this.wagesdetail = this.wagesdetailCopy;
      }
    },
    calculation2(e) {
      if (e === false) {
        this.ruleType2 = null;
        this.departureDetail = null;
      } else {
        this.ruleType2 = this.ruleType2Copy;
        this.departureDetail = this.departureDetailCopy;
      }
    }
  },
  created() {
    this.ruleList();
    this.findCompanyGroup();
    this.functionBox = this.isContainByString("file")
      ? this.$store.state.app.sidebar.opened
        ? "functionBox2"
        : "functionBox3"
      : "functionBox";
    if (this.isContainByString("file")) {
      this.columns = [
        {
          title: "姓名",
          dataIndex: "name",
          key: "name",
          width: 100
        },
        {
          title: "联系电话",
          dataIndex: "phone",
          key: "phone",
          width: 120
        },
        {
          title: "最近入职日期",
          dataIndex: "joinDate",
          key: "joinDate",
          customRender: (text, record, index) => {
            return formatDate(text);
          },
          width: 120,
          scopedSlots: { customRender: "joinDate" }
        },
        {
          title: "渠道来源",
          dataIndex: "channelName",
          key: "channelName",
          width: 100,
          scopedSlots: { customRender: "channelName" }
        }
      ];
    }
  },
  methods: {
    onShowSizeChange(current, pageSize) {
      this.current = current;
      this.pageSize = pageSize;
      this.ruleList();
    },
    currentChange(current, pageSize) {
      this.current = current;
      this.pageSize = pageSize;
      this.ruleList();
    },
    cancelRule() {
      this.detaile = this.detaileCopy;
      this.$set(this.detaile, "name", this.detaileCopy.name);
      this.ruleNameInput = false;
      this.dataList = JSON.parse(JSON.stringify(this.dataListCopy));
      this.dataList2 = JSON.parse(JSON.stringify(this.dataList2Copy));
    },
    deleteItems() {
      var deleteList = [];
      this.list.forEach((item, index) => {
        if (item.isChecked) {
          deleteList.push(item.id);
        }
      });
      this.$confirm({
        title: "注意",
        content: "确认批量删除已选规则吗？",
        okText: "确认",
        cancelText: "取消",
        onCancel() {
          console.log("Cancel");
        },
        onOk: () => {
          deleteItems(deleteList).then(res => {
            this.ruleList();
            this.$notification["success"]({
              message: "成功",
              description: "删除成功"
            });
            this.lastCheckState = false;
            this.deleteState = false;
          });
        }
      });
    },
    checkCancel() {
      this.lastCheckState = false;
      this.deleteState = false;
      this.allState = false;
      this.list.forEach((item, index) => {
        item.isChecked = false;
      });
    },
    itemCheckChange() {
      var num = 0;
      this.list.forEach((item, index) => {
        if (item.isChecked) {
          num++;
        }
      });
      if (num === this.list.length) {
        this.allState = true;
      } else {
        this.allState = false;
      }
      if (num > 0) {
        this.lastCheckState = true;
      } else {
        this.lastCheckState = false;
      }
    },
    onCheckChange(e) {
      this.list.forEach((item, index) => {
        item.isChecked = e.target.checked;
      });
      this.list = JSON.parse(JSON.stringify(this.list));
      var num = 0;
      this.list.forEach((item, index) => {
        if (item.isChecked) {
          num++;
        }
      });
      if (num > 0) {
        this.lastCheckState = true;
      } else {
        this.lastCheckState = false;
      }
    },
    handleMenuClick(e) {
      switch (e.key) {
        case "1":
          this.showModal();
          break;
        case "2":
          this.deleteItem();
          break;
      }
    },
    deleteItem() {
      this.deleteState = true;
    },
    unitChange(e) {
      if (this.timeStart.unit === 2) {
        this.ruleType = "1";
        this.ruleType2 = "1";
        this.ruleTypeCopy = "1";
        this.ruleType2Copy = "1";
      } else if (this.timeStart.unit === 3) {
        this.ruleType = "2";
        this.ruleType2 = "2";
        this.ruleTypeCopy = "2";
        this.ruleType2Copy = "2";
      }
    },
    unitChange2(e) {
      // if (this.EndAstrict.unit === 2) {
      //   this.ruleType2 = "1";
      // } else if (this.EndAstrict.unit === 3) {
      //   this.ruleType2 = "2";
      // }
    },
    addTreeSlot(data) {
      if (!data) {
        return [];
      }
      data.forEach(el => {
        el.scopedSlots = { title: "custom" };
        this.addTreeSlot(el.companyList);
      });
      return data;
    },
    findCompanyGroup(e) {
      findCompanyGroup({ name: e || null })
        .then(res => {
          this.companyDataList = this.addTreeSlot(res.data);
          this.flatten(this.companyDataList);
          this.companyList = JSON.parse(JSON.stringify(this.companyList));
        })
        .catch(err => {
          console.log("debug log --> ", err);
        });
    },
    // 递归处理为扁平数组
    flatten(list) {
      if (list !== null) {
        list.forEach(item => {
          this.flatDataList.push(item);
          this.flatten(item.companyList);
        });
      }
    },
    treeSearch(e) {
      this.findCompanyGroup(e);
    },
    showModal() {
      this.issueModalVisible = true;
    },
    handleCancelIssueModal() {
      this.issueModalVisible = false;
      // 已选的
      this.contractList = [];
      // 已选的公司数据
      this.companyList = [];
    },
    confirmIssueModal() {
      if (this.companyList.length === 0) {
        this.$notification["error"]({
          message: "错误",
          description: "请选择需要下发的公司"
        });
        return;
      }
      if (this.contractList.length === 0) {
        this.$notification["error"]({
          message: "错误",
          description: "请选择需要下发的规则"
        });
        return;
      }
      const companyArr = [];
      this.companyList.forEach(item => {
        this.flatDataList.forEach((item2, index2) => {
          if (item2.uuid && item2.uuid === item.value) {
            companyArr.push(item2.id);
          }
        });
      });
      const data = {
        companyIdList: companyArr,
        salaryCalculateRuleGroupIdList: this.contractList
      };
      issueGroup(data)
        .then(res => {
          this.issueModalVisible = false;
          this.$notification["success"]({
            message: "成功",
            description: "下发成功"
          });
          this.companyList = [];
          this.ruleList();
        })
        .catch(err => {
          console.log("debug log --> ", err);
          // this.$notification["error"]({
          //   message: "错误",
          //   description: "下发失败"
          // });
        });
      // TODO 下发接口
    },
    showDelete(e) {
      this.deleteItemId = e.id;
      this.deleteVisible = true;
    },
    // 分页查询规则组下规则
    salaryRulesListByPage() {
      salaryRulesListByPage({
        pageNo: this.paginationOpt.defaultCurrent,
        pageSize: this.paginationOpt.defaultPageSize,
        salaryCalculateRuleGroupId: this.salaryCalculateRuleId
      }).then(res => {
        this.dataList = res.data.entities;
        this.paginationOpt.total = res.data.entityCount;
      });
    },
    bothChange(e) {
      this.$set(this.timeStart, "startTime", moment(e[0]).format("YYYY-MM-DD"));
      this.$set(this.timeStart, "endTime", moment(e[1]).format("YYYY-MM-DD"));
    },
    onlyStartChange(e) {
      this.$set(this.timeStart, "startTime", moment(e).format("YYYY-MM-DD"));
    },
    typeChange(e) {
      this.timeStart = {};
      this.$set(this.timeStart, "type", e.target.value);
    },
    effectTypeChange(e) {
      // if (e) {
      this.timeStart = {};
      this.ruleType = "2";
      this.ruleTypeCopy = "2";
      this.clear();
      this.timeStart.type = undefined;
      this.calculation = false;
      this.calculation2 = false;
      this.ruleType2 = "2";
      this.ruleType2Copy = "2";
      this.welfareChecked = false;
      this.welfareChecked2 = false;
      this.lastLimit = false;
      this.checked1 = false;
      this.dissatisfyMonth = false;
      this.rangeDate = null;
      this.startDatePick = null;
      // }
    },
    limitNumber(value) {
      if (typeof value === "string") {
        return !isNaN(Number(value)) ? value.replace(/\./g, "") : 0;
      } else if (typeof value === "number") {
        return !isNaN(value) ? String(value).replace(/\./g, "") : 0;
      } else {
        return 0;
      }
    },
    // 搜索规则
    onSearch(value) {
      this.ruleNameInput = false;
      this.value = value;
      this.ruleList();
    },
    // 搜索规则
    onSearch1(value) {
      this.nameOrIdCard = value;
      this.paginationOpt2.current = 1;
      this.redPacketList();
    },
    // 获取列表和右边数据
    ruleList() {
      this.spinning = true;
      this.lastCheckState = false;
      this.deleteState = false;
      this.allState = false;
      if (this.list.length) {
        this.list.forEach((item, index) => {
          item.isChecked = false;
        });
      }
      getSalaryCalculateRuleGroupsPage({
        companyId: this.isContainByString("file") ? this.companyId : "0",
        name: this.value,
        ruleType: 2,
        isShowPeopleNumber: true,
        pageNo: this.current,
        pageSize: this.pageSize
        // "orders[0].property": "gmtCreate",
        // "orders[0].desc": true
      }).then(res => {
        this.list = res.data.entities;
        this.total = res.data.entityCount;
        if (res.data.entities.length === 0 && this.current > 1) {
          // 当本页非第一页（比第一页大）时，删除最后一条后台会返回当页页码，
          // 但是本页数据为空，table组件会展示为当前页的上一页数据为空，需要加加判断再拉一下上页数据
          this.current = this.current - 1;
          this.pageSize = 10;
          this.ruleList();
        } else {
          if (this.list.length > 0) {
            this.detaile = JSON.parse(JSON.stringify(this.list[0]));
            this.salaryCalculateRuleId = res.data.entities[0].id;
            this.salaryRulesListByPage();
            if (this.isContainByString("file")) {
              selectEmpInfoVoBySalaryCalculateRuleGroupId({
                nameOrIdCard: this.nameOrIdCard,
                pageNo: this.paginationOpt2.defaultCurrent,
                pageSize: this.paginationOpt2.defaultPageSize,
                salaryCalculateRuleId: this.salaryCalculateRuleId
              }).then(res => {
                this.dataList2 = res.data.entities;
                this.paginationOpt2.total = res.data.entityCount;
                this.spinning = false;
              });
            } else {
              selectEmpInfoVoBySalaryCalculateRuleGroupId2({
                nameOrIdCard: this.nameOrIdCard,
                pageNo: this.paginationOpt2.defaultCurrent,
                pageSize: this.paginationOpt2.defaultPageSize,
                salaryCalculateRuleId: this.salaryCalculateRuleId
              }).then(res => {
                this.dataList2 = res.data.entities;
                this.paginationOpt2.total = res.data.entityCount;
                this.spinning = false;
              });
            }

            this.spinning = false;
          } else {
            this.spinning = false;
            this.detaile = null;
          }
        }
      });
    },
    redPacketList() {
      this.spinning = true;
      if (this.isContainByString("file")) {
        selectEmpInfoVoBySalaryCalculateRuleGroupId({
          nameOrIdCard: this.nameOrIdCard,
          pageNo: this.paginationOpt2.current,
          pageSize: this.paginationOpt2.defaultPageSize,
          salaryCalculateRuleId: this.salaryCalculateRuleId
        }).then(res => {
          this.dataList2 = res.data.entities;
          this.paginationOpt2.total = res.data.entityCount;
          this.spinning = false;
        });
      } else {
        selectEmpInfoVoBySalaryCalculateRuleGroupId2({
          nameOrIdCard: this.nameOrIdCard,
          pageNo: this.paginationOpt2.current,
          pageSize: this.paginationOpt2.defaultPageSize,
          salaryCalculateRuleId: this.salaryCalculateRuleId
        }).then(res => {
          this.dataList2 = res.data.entities;
          this.paginationOpt2.total = res.data.entityCount;
          this.spinning = false;
        });
      }
    },
    // 获取数组里的每一个时间
    onDateChange(date, dateString, item) {
      item.time = dateString;
    },
    // 删除规则
    deleteOk2() {
      deleteRuleGroupId(this.salaryCalculateRuleId).then(res => {
        if (res.code === 200) {
          this.$message.success("删除成功");
          this.deleteVisible2 = false;
          this.listIndex = 0;
          this.ruleList();
        }
      });
    },
    deleteOk() {
      salaryCalculateRulesDelete(this.deleteItemId).then(res => {
        if (res.code === 200) {
          this.$message.success("删除成功");
          this.deleteVisible = false;
          this.listIndex = 0;
          // this.ruleList();
          if (this.isContainByString("file")) {
            editSalaryCalculateRuleGroups({
              companyId: this.companyId,
              name: this.detaile.name,
              id: this.detaile.id,
              ruleType: 2,
              source: "0"
            }).then(res => {
              this.ruleList();
            });
          } else {
            editSalaryCalculateRuleGroups({
              companyId: "0",
              name: this.detaile.name,
              id: this.detaile.id,
              ruleType: 2
            }).then(res => {
              this.ruleList();
            });
            this.ruleList();
          }
          // this.redPacketList();
          // this.salaryRulesListByPage();
        }
      });
    },
    // 左侧侧边栏内容点击事件
    onClickRule(item, index) {
      this.spinning = true;
      this.listIndex = index;
      this.paginationOpt.current = 1;
      this.paginationOpt.defaultCurrent = 1;
      this.clear();
      this.detaile = JSON.parse(JSON.stringify(item));
      this.spinning = false;
      this.ruleNameInput = false;
      if (item) {
        this.salaryCalculateRuleId = item.id;
        this.salaryRulesListByPage();
      }
      if (this.isContainByString("file")) {
        selectEmpInfoVoBySalaryCalculateRuleGroupId({
          nameOrIdCard: this.nameOrIdCard,
          pageNo: this.paginationOpt2.defaultCurrent,
          pageSize: this.paginationOpt2.defaultPageSize,
          salaryCalculateRuleId: this.salaryCalculateRuleId
        }).then(res => {
          this.dataList2 = res.data.entities;
          this.paginationOpt2.total = res.data.entityCount;
          this.spinning = false;
        });
      } else {
        selectEmpInfoVoBySalaryCalculateRuleGroupId2({
          nameOrIdCard: this.nameOrIdCard,
          pageNo: this.paginationOpt2.defaultCurrent,
          pageSize: this.paginationOpt2.defaultPageSize,
          salaryCalculateRuleId: this.salaryCalculateRuleId
        }).then(res => {
          this.dataList2 = res.data.entities;
          this.paginationOpt2.total = res.data.entityCount;
          this.spinning = false;
        });
      }
    },
    // 清空内容
    clear() {
      this.name = "";
      this.hourAmountDouble = "";
      this.checked = false;
      this.checked1 = false;
      this.labourList = [];
      this.numList = [];
      this.leaveList = [];
    },
    // 添加事件
    onCreate() {
      this.isAdd = true;
      this.ruleNameInput = true;
      this.detaileCopy = this.detaile;
      this.detaile = {};
      this.dataListCopy = JSON.parse(JSON.stringify(this.dataList));
      this.dataList2Copy = JSON.parse(JSON.stringify(this.dataList2));
      this.dataList = JSON.parse(JSON.stringify([]));
      this.dataList2 = JSON.parse(JSON.stringify([]));
      this.paginationOpt.total = 0;
      this.$nextTick(() => {
        this.$refs.nameInput.focus();
      });
    },
    onCreateItem() {
      this.title = "新增劳务费规则";
      this.visible = true;
      this.ruleType = "2";
      this.ruleTypeCopy = "2";
      this.clear();
      this.effectType = undefined;
      this.timeStart.type = undefined;
      this.calculation = false;
      this.calculation2 = false;
      this.ruleType2 = "2";
      this.ruleType2Copy = "2";
      this.welfareChecked = false;
      this.welfareChecked2 = false;
      this.lastLimit = false;
      this.checked1 = false;
      this.dissatisfyMonth = false;
      this.rangeDate = null;
      this.startDatePick = null;
    },
    addRuleOk() {
      if (this.detaile.name) {
        if (this.isAdd === true) {
          addSalaryCalculateRuleGroups({
            companyId: this.isContainByString("file") ? this.companyId : "0",
            name: this.detaile.name,
            ruleType: 2
          }).then(res => {
            this.ruleNameInput = false;
            this.$message.success("添加成功");
            this.isAdd = false;
            this.listIndex = 0;
            this.ruleList();
          });
        } else {
          editSalaryCalculateRuleGroups({
            companyId: this.isContainByString("file") ? this.companyId : "0",
            name: this.detaile.name,
            id: this.detaile.id,
            ruleType: 2,
            source: this.isContainByString("file") ? undefined : "0"
          }).then(res => {
            this.ruleNameInput = false;
            this.$message.success("修改成功");
            this.isAdd = false;
            this.listIndex = 0;
            this.ruleList();
          });
        }
      } else {
        this.$notification["error"]({
          message: "错误",
          description: "规则组名称不能为空"
        });
      }
    },
    editRuleName() {
      this.ruleNameInput = true;
      this.detaileCopy = this.detaile;
      this.dataListCopy = JSON.parse(JSON.stringify(this.dataList));
      this.dataList2Copy = JSON.parse(JSON.stringify(this.dataList2));
      this.$nextTick(() => {
        this.$refs.nameInput.focus();
        this.isAdd = false;
      });
    },
    // 一次性红包添加事件
    onChange(e) {
      if (e.target.checked) {
        this.numList.push({ number: null, units: "", redPacketAmount: null });
        this.checked = true;
      } else {
        this.numList = [];
        this.checked = false;
      }
    },
    // 离职倒扣添加事件
    onChange1(e) {
      if (e.target.checked) {
        this.checked1 = true;
      } else {
        this.checked1 = false;
        this.leaveList = [];
      }
    },

    // 添加编辑规则
    onClose() {
      // 限时和半长期时提示时间必填
      if ((this.effectType === "1" || this.effectType === "2") && !this.timeStart.type) {
        this.$notification["error"]({
          message: "注意",
          description: "请选择生效时间类型"
        });
        return;
      }
      // 限时+按时间
      if (this.effectType === "1" && this.timeStart.type === "1") {
        if (!this.timeStart.startNumber || !this.timeStart.endNumber || !this.timeStart.unit) {
          this.$notification["error"]({
            message: "注意",
            description: "生效时间需填写完整"
          });
          return;
        }
      }
      // 限时+按日期
      if (this.effectType === "1" && this.timeStart.type === "2") {
        if (!this.timeStart.startTime || !this.timeStart.endTime) {
          this.$notification["error"]({
            message: "注意",
            description: "生效时间需填写完整"
          });
          return;
        }
      }
      // 半长期+按时间
      if (this.effectType === "2" && this.timeStart.type === "1") {
        if (!this.timeStart.startNumber || !this.timeStart.unit) {
          this.$notification["error"]({
            message: "注意",
            description: "生效时间需填写完整"
          });
          return;
        }
      }
      // 半长期+按日期
      if (this.effectType === "2" && this.timeStart.type === "2") {
        if (!this.timeStart.startTime) {
          this.$notification["error"]({
            message: "注意",
            description: "生效时间需填写完整"
          });
          return;
        }
      }
      if (this.calculation && !this.wagesdetail) {
        this.$notification["error"]({
          message: "注意",
          description: "请填写基础规则工价计算信息"
        });
        return;
      }
      if (this.calculation2 && !this.departureDetail) {
        this.$notification["error"]({
          message: "注意",
          description: "请填写离职规则工价计算信息"
        });
        return;
      }
      if (this.welfareChecked) {
        if (
          this.RedPacketRule.number === null ||
          this.RedPacketRule.number === undefined ||
          !this.RedPacketRule.units ||
          !this.RedPacketRule.redPacketAmount
        ) {
          this.$notification["error"]({
            message: "注意",
            description: "请填写完整红包信息"
          });
          return;
        }
      }
      if (this.welfareChecked2) {
        if (
          this.RedPacketRule2.number === null ||
          this.RedPacketRule2.number === undefined ||
          !this.RedPacketRule2.units ||
          !this.RedPacketRule2.redPacketAmount
        ) {
          this.$notification["error"]({
            message: "注意",
            description: "请填写完整红包信息"
          });
          return;
        }
      }
      if (this.checked1 && !this.specialCostDouble) {
        this.$notification["error"]({
          message: "注意",
          description: "请填写离职倒扣信息"
        });
        return;
      }
      var redPacketRule = [];
      if (JSON.stringify(this.RedPacketRule) !== "{}") {
        this.RedPacketRule.calculateType = 1;
        redPacketRule.push(this.RedPacketRule);
      }
      if (JSON.stringify(this.RedPacketRule2) !== "{}" && JSON.stringify(this.RedPacketRule2) !== '{"units":""}') {
        this.RedPacketRule2.calculateType = 2;
        redPacketRule.push(this.RedPacketRule2);
      }
      if (this.timeStart.type) {
        this.timeStart.type = parseInt(this.timeStart.type);
      }
      var arr = {
        salaryCalculateRuleGroupId: this.salaryCalculateRuleId,
        timeType: parseInt(this.effectType),
        dissatisfyMonth: this.dissatisfyMonth,
        // endAstrict: this.lastLimit,
        // endAstrictJson: this.lastLimit ? this.EndAstrict : undefined,
        hourAmountRule: this.wagesdetail ? [{ hourAmount: this.wagesdetail }] : undefined,
        leaveOfficeRule: this.departureDetail ? [{ hourAmount: this.departureDetail }] : undefined,
        showType: this.ruleType ? parseInt(this.ruleType) : undefined,
        leaveShowType: this.ruleType2 ? parseInt(this.ruleType2) : undefined,
        ruleType: 2,
        specialCostDouble: this.specialCostDouble ? this.specialCostDouble : undefined,
        timeJson: JSON.stringify(this.timeStart) === "{}" ? undefined : this.timeStart,
        redPacketRule: redPacketRule.length > 0 ? redPacketRule : undefined
      };
      if (this.title === "新增劳务费规则") {
        salaryCalculateRules(arr).then(res => {
          if (res.code === 200) {
            this.$message.success("添加成功");
            this.visible = false;
            this.listIndex = 0;
            if (this.isContainByString("file")) {
              editSalaryCalculateRuleGroups({
                companyId: this.companyId,
                name: this.detaile.name,
                id: this.detaile.id,
                ruleType: 2,
                source: "0"
              }).then(res => {
                this.ruleList();
              });
            } else {
              // this.salaryRulesListByPage();
              editSalaryCalculateRuleGroups({
                companyId: "0",
                name: this.detaile.name,
                id: this.detaile.id,
                ruleType: 2
              }).then(res => {
                this.ruleList();
              });
            }
          }
        });
      } else if (this.title === "编辑劳务费规则") {
        salaryCalculateRulesEdits({ ...arr, id: this.editId }).then(res => {
          if (res.code === 200) {
            this.$message.success("编辑成功");
            this.listIndex = 0;
            this.visible = false;
            if (this.isContainByString("file")) {
              editSalaryCalculateRuleGroups({
                companyId: this.companyId,
                name: this.detaile.name,
                id: this.detaile.id,
                ruleType: 2,
                source: "0"
              }).then(res => {
                this.ruleList();
              });
            } else {
              // this.salaryRulesListByPage();
              editSalaryCalculateRuleGroups({
                companyId: "0",
                name: this.detaile.name,
                id: this.detaile.id,
                ruleType: 2
              }).then(res => {
                this.ruleList();
              });
            }
          }
        });
      }
    },
    // 点击编辑规则回显
    onClickEdit(e) {
      this.visible = true;
      // 回显规则详细信息
      this.editId = e.id;
      this.welfareChecked = false;
      this.welfareChecked2 = false;
      this.rangeDate = null;
      this.title = "编辑劳务费规则";
      this.effectType = e.timeType.toString();
      this.dissatisfyMonth = e.dissatisfyMonth !== 0;
      this.lastLimit = e.endAstrict !== 0;
      this.checked1 = !!(e.specialCostDouble && e.specialCostDouble > 0);
      this.specialCostDouble = e.specialCostDouble;
      this.EndAstrict = e.endAstrictJson ? JSON.parse(e.endAstrictJson) : {};
      var redPacketRule = [];
      this.ruleType = e.showType ? e.showType.toString() : null;
      this.ruleType2 = e.leaveShowType ? e.leaveShowType.toString() : null;
      this.ruleTypeCopy = e.showType ? e.showType.toString() : null;
      this.ruleType2Copy = e.leaveShowType ? e.leaveShowType.toString() : null;
      this.departureDetail = e.leaveOfficeRule && JSON.parse(e.leaveOfficeRule).length ? JSON.parse(e.leaveOfficeRule)[0].hourAmount : null;
      this.wagesdetail = e.hourAmountRule && JSON.parse(e.hourAmountRule).length ? JSON.parse(e.hourAmountRule)[0].hourAmount : null;
      this.departureDetailCopy =
        e.leaveOfficeRule && JSON.parse(e.leaveOfficeRule).length ? JSON.parse(e.leaveOfficeRule)[0].hourAmount : null;
      this.wagesdetailCopy = e.hourAmountRule && JSON.parse(e.hourAmountRule).length ? JSON.parse(e.hourAmountRule)[0].hourAmount : null;
      this.calculation2 = !!this.departureDetail;
      this.calculation = !!this.wagesdetail;
      if (e.redPacketRule) {
        redPacketRule = JSON.parse(e.redPacketRule);
        redPacketRule.forEach((item, index) => {
          if (item.calculateType === 1) {
            this.RedPacketRule = item;
            this.welfareChecked = true;
          } else if (item.calculateType === 2) {
            this.RedPacketRule2 = item;
            this.welfareChecked2 = true;
          }
        });
      }
      // 对于回显时间的处理
      if (e.timeJson) {
        if (JSON.parse(e.timeJson) && JSON.parse(e.timeJson).type) {
          this.$nextTick(() => {
            this.timeStart = JSON.parse(e.timeJson);
            this.timeStart.type = this.timeStart.type.toString();
            if (this.effectType === "1" && this.timeStart.type === "1") {
              // 限时+按时间
              this.$set(this.timeStart, "startNumber", this.timeStart.startNumber);
              this.$set(this.timeStart, "endNumber", this.timeStart.endNumber);
              this.$set(this.timeStart, "unit", this.timeStart.unit);
            }
            if (this.effectType === "1" && this.timeStart.type === "2") {
              // 限时+按日期
              this.rangeDate = [];
              this.rangeDate[0] = moment(this.timeStart.startTime, "YYYY-MM-DD");
              this.rangeDate[1] = moment(this.timeStart.endTime, "YYYY-MM-DD");
            }
            if (this.effectType === "2" && this.timeStart.type === "1") {
              // 半长期+按时间
              this.$set(this.timeStart, "startNumber", this.timeStart.startNumber);
              this.$set(this.timeStart, "unit", this.timeStart.unit);
            }
            if (this.effectType === "2" && this.timeStart.type === "2") {
              // 半长期+按日期
              this.startDatePick = moment(this.timeStart.startTime, "YYYY-MM-DD");
            }
          });
        } else {
          this.timeStart = {};
        }
      }
    }
  }
};
</script>
<style lang="scss" scoped>
::v-deep.new-sidebar-wrapper {
  z-index: 1000;
}
::v-deep.antClassSelectHei .ant-select-selection {
  max-height: 90px;
  overflow-y: auto;
}
.addIngItem {
  display: flex;
  justify-content: space-between;
  align-items: center;
  .shuxian {
    width: 3px;
    height: 20px;
    background: var(--primary);
  }
}
.body {
  .title1 {
    margin-right: 36px;
    color: var(--primary);
    font-size: 14px;
    font-weight: 1000;
  }
  .icon {
    margin-right: 5px;
    font-size: 20px;
  }
  width: 100%;
  // min-height: 820px;
  background-color: #ffffff;
  padding: 12px;
  display: flex;
  flex-direction: row;
  .left {
    position: relative;
    width: 365px;
    height: 1020px;
    overflow: scroll;
    padding-bottom: 50px;
    border-right: 1px solid #e5e5e5;
    background-color: #ffffff;
    // .functionBox3 {
    //   position: fixed;
    //   bottom: 23px;
    //   left: 95px;
    // }
    // .functionBox2 {
    //   position: fixed;
    //   bottom: 23px;
    //   left: 238px;
    // }
    .functionBox {
      position: fixed;
      z-index: 10;
      width: 100%;
      bottom: 0px;
      left: 0;
      height: 48px;
      box-shadow: 0px -1px 6px 0px rgba(0, 0, 0, 0.12), 0px 1px 0px 0px #e8e8e8;
      background: #fff;
      display: flex;
      justify-content: center;
      align-items: center;

      // left: 198px;
    }
    .left-top {
      display: flex;
      width: 343px;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      margin-top: 26px;
      .title {
        margin-left: 24px;
        color: #000000;
        font-size: 16px;
        font-weight: 700;
      }
      .icon {
        margin-right: 5px;
        color: var(--primary);
        font-size: 20px;
      }
      .title1 {
        margin-right: 36px;
        color: var(--primary);
        font-size: 14px;
        font-weight: 1000;
      }
    }
    .xian {
      width: 343px;
      height: 1px;
      background-color: #e5e5e5;
      margin: 15px 0 10px 0;
    }
    .left-center {
      width: 343px;
      height: 48px;
      border-bottom: 1px solid #e5e5e5;
      background: #ffffff;
      display: flex;
      flex-flow: row;
      align-items: center;
      justify-content: space-between;
      cursor: pointer;
      .left-center-title {
        width: 220px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        margin-left: 12px;
        color: #55565d;
        font-size: 14px;
      }
      .left-center-title1 {
        margin-right: 16px;
        color: #55565d;
        font-size: 14px;
      }
    }
    .active {
      background: var(--primary10);
    }
    .listTitle {
      width: 220px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      margin-left: 12px;
      font-size: 14px;
      color: var(--primary);
    }
  }
  .right {
    display: flex;
    flex: 1;
    flex-direction: column;
    margin-top: 24px;
    padding: 0 10px 0 24px;
    background-color: #ffffff;
    .right-top {
      width: 100%;
      display: flex;
      justify-content: space-between;
      .topTile {
        flex: 1;
      }
      .btns {
        width: 170px;
        margin-left: 20px;
      }
    }
  }
  .zanwushuju {
    width: 100%;
    text-align: center;
    margin-top: 300px;
  }
}
.shu {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  .shuxian {
    width: 3px;
    height: 20px;
    background: var(--primary);
  }
}
.deleteIcon:hover {
  color: #fa5051;
}
.addIcon {
  color: var(--primary);
}
.primary {
  color: var(--primary);
  cursor: pointer;
}
</style>
